<!-- 绑定银行卡 -->
<template>
	<view>
		<navbar :isFixed="true" title="绑定银行卡" :borderBottom="false"></navbar>
		<view class="tips">
			请先实名认证再添加本人银行卡
		</view>
		<view class="wrap">
			<view class="item flex_align">
				<view class="name">持卡人姓名<text>*</text></view>
				<input type="text" placeholder="请输入持卡人姓名" v-model="realname">
			</view>
			<view class="item flex_align">
				<view class="name">开户行<text>*</text></view>
				<input type="text" placeholder="请填写银行卡开户行" v-model="bank_name">
			</view>
			<view class="item flex_align">
				<view class="name">银行卡号<text>*</text></view>
				<input type="number" placeholder="请填写持卡人本人的银行卡卡号" maxlength="19" v-model="card_num">
			</view>
			<view class="item flex_align">
				<view class="name">手机号<text>*</text></view>
				<input type="number" v-model="mobile" maxlength="11" placeholder="请填写银行卡预留手机号">
			</view>
			<view class="item flex_bet_align">
				<view class="name">验证码<text>*</text></view>
				<input type="text" placeholder="请填输入验证码" v-model="code">
				<view class="btn" v-if="!flag" @click="getcode">获取验证码</view>
				<view class="btn" v-if="flag">请<countDown :timestamp="timestamp" :show-days="false" :show-hours="false"
						:show-minutes="false" color="#2cba97" @end="end"></countDown>s后重试</view>
			</view>
		</view>
		<view class="foot">
			<view class="btn" @click="submit">确认绑定</view>
			<view class="text">
				<view>1、请确保银行卡预留手机号为注册手机号</view>
				<view>2、请确保银行卡为本人所有，绑定他人银行卡将无法绑定成功</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _this;
	import navbar from '@/uview-ui/components/u-navbar/u-navbar.vue';
	import countDown from '@/uview-ui/components/u-count-down/u-count-down.vue'
	export default {
		components: {
			navbar,
			countDown
		},
		data() {
			return {
				timestamp: 59,
				flag: false,
				mobile: '',
				bank_name: '',
				card_num: '',
				realname: '',
				code: '',
			}
		},
		methods: {
			onLoad(options) {
				_this = this
			},
			end() {
				this.flag = false
			},
			getcode() {
				let data = [{
						value: _this.mobile,
						type: 1,
						title: "请填写手机号"
					}, {
						value: _this.mobile,
						type: 3,
						title: "请输入正确手机号"
					}

				]
				if (_this.$plug.verify(data)) {
					this.flag = true
					_this.$api.get("send_code", {
						mobile: this.mobile
					}).then(data => {
						console.log(data)
					});
				}
			},
			// 6230720210110357465   17394940476
			submit() {
				console.log(this.mobile, this.bank_name, this.card_num, this.realname, this.code, )
				if (this.realname == '' || this.bank_name == '' || this.card_num == '' || this.mobile == '' || this.code ==
					'') {
					uni.showToast({
						title: "请完善上方信息",
						icon: "none"
					})
				} else {
					_this.$api.post("bindingbank", {
						realname: this.realname,
						bank_name: this.bank_name,
						card_num: this.card_num,
						mobile: this.mobile,
						code: this.code
					}).then(data => {
						console.log(data)
					});
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F2F2F2;
		font-family: PingFang SC;
	}

	.tips {
		width: 750rpx;
		height: 92rpx;
		background: #f2f2f2;
		font-size: 26rpx;
		font-weight: 500;
		text-align: center;
		line-height: 92rpx;
		color: #666666;
	}

	.wrap {
		padding: 10rpx 30rpx 20rpx;
		background-color: #FFFFFF;

		.item {
			padding: 40rpx 0;
			border-bottom: 1rpx solid #EEEEEE;

			.name {
				width: 190rpx;

				text {
					color: red;
				}
			}

			input {
				font-size: 28rpx;
				font-weight: 500;
				line-height: 100rpx;
				flex: 1;
			}

			.btn {
				font-size: 28rpx;
				font-weight: 500;
				color: #2cba97;
			}
		}

		.item:nth-last-child(1) {
			border: none;
			padding-right: 12rpx;

			input {
				flex: 1;
			}
		}
	}

	.foot {
		width: 750rpx;
		position: fixed;
		bottom: 82rpx;
		left: 0;

		.btn {
			width: 680rpx;
			height: 90rpx;
			background: linear-gradient(86deg, #38be8c 0%, #05adbb 100%);
			border-radius: 45rpx;
			font-size: 34rpx;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			line-height: 90rpx;
			margin-left: 33rpx;
			margin-bottom: 40rpx;
		}

		.text {
			font-size: 23rpx;
			font-weight: 500;
			color: #999999;
			line-height: 36rpx;
			padding-left: 45rpx;
		}
	}
</style>
